import {
    Box,
    Button,
    HStack,
    Input,
    InputGroup,
    InputRightElement,
    Select,
    Text,
    useColorModeValue
} from "@chakra-ui/react";
import {AddIcon, ArrowLeftIcon, ArrowRightIcon, CalendarIcon, SearchIcon} from "@chakra-ui/icons";
import {DatePicker, Space} from 'antd';

const {RangePicker} = DatePicker;

const dateFormat = 'YYYY/MM/DD';
const weekFormat = 'MM/DD';
const monthFormat = 'YYYY/MM';

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);


export function DoctorShowSearchBar(props) {
    // console.log(props)
    const {searchItem, dateSearchItem, pageSearchItem} = props

    let pages = []
    for (let i = 0; i < pageSearchItem.total; i++) {
        pages.push(i + 1)
    }

    return (
        <HStack w={'100%'} flexDirection={'row'} justifyContent={'space-between'}>
            <HStack spacing={4}>
                {/*根据xx搜索*/}
                <InputGroup maxW={'140px'}>
                    <Input
                        onChange={searchItem.onChange}
                        value={searchItem.value}
                        placeholder={searchItem.placeholder}/>
                    <InputRightElement>
                        <SearchIcon
                            color={useColorModeValue('green.500', 'green.800')}/>
                    </InputRightElement>
                </InputGroup>
                <Button onClick={searchItem.onClick}>搜索</Button>

                {/*根据日期搜索*/}
                <HStack ml={8}>
                    <Text>日期</Text>

                    <RangePicker
                        defaultValue={[dayjs('2023/01/01', dateFormat),
                            dayjs('2023/01/01', dateFormat)]}
                        format={dateFormat}
                        onChange={dateSearchItem.onChange}
                    />
                    <Button onClick={dateSearchItem.onClick}>搜索</Button>
                </HStack>
                <HStack ml={8}>
                    <Text>页数</Text>
                    <Button
                        onClick={pageSearchItem.onLeftClick}
                        leftIcon={<ArrowLeftIcon/>}></Button>
                    <Select
                        value={pageSearchItem.curIdx}
                        w={16}
                        onChange={pageSearchItem.onChange}
                    >
                        {pages.map(p => {
                                // if (p === 0) {
                                //     return
                                // }
                                return <option key={p} value={p}>{p}</option>
                            }
                        )}
                    </Select>
                    <Button
                        onClick={pageSearchItem.onRightClick}
                        rightIcon={<ArrowRightIcon/>}></Button>
                    <Button onClick={pageSearchItem.onClick}>搜索</Button>
                </HStack>
            </HStack>
        </HStack>
    )
}